<template>
  <section class="container">
    <v-banner></v-banner>
    <div class="houses-box">
      <h3 class="title">权力与游戏之家族</h3>
      <ul class="the-houses">
        <li v-for="house in houses.data" :key="house.name">{{house.cname}}</li>
      </ul>
    </div>
    <div class="characters-box">
      <h3>权力与游戏之人物</h3>
      <ul class="the-characters">
        <li v-for="item in characters.data" :key="item.cname">
          <nuxt-link :to="`/character`">
            <img :src="imgMatch(item.profile)" />
          </nuxt-link>
          <span>{{item.cname}}</span>
        </li>
      </ul>
    </div>
  </section>
</template>

<script>
import { mapState, mapActions } from 'vuex'
import Banner from '../components/Banner'
import tan90 from '../static/img/tan90.jpg'
export default {
  head() {
    return {
      title: `权力的游戏`
    }
  },
  components: {
    "v-banner": Banner
  },
  data() {
    return {
    }
  },
  computed: {
    ...mapState([
      'houses',
      'characters'
    ])
  },
  methods: {
    ...mapActions([
      'fetchHouses',
      'fetchCharacters'
    ]),
    async fetchData() {
      await this.fetchHouses();
      await this.fetchCharacters({ p: 1, c: 10 });
    },
    imgMatch(img) {
      const reg = /https/;
      return reg.test(img) ? img : tan90
    }
  },
  created() {
    this.fetchData();
  }
}
</script>

<style scoped lang="less">
.houses-box {
  width: 100%;
  .title {
    line-height: 30px;
    text-align: left;
  }
  .the-houses {
    overflow: hidden;
    width: 100%;
    li:nth-of-type(1) {
      width: 100%;
    }
    li {
      float: left;
      width: 50%;
    }
  }
}

.characters-box {
  width: 100%;
  .title {
    line-height: 30px;
    text-align: left;
  }
  .the-characters {
    overflow: hidden;
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    li {
      flex: 1;
      max-width: 200px;
      min-width: 120px;
      a {
        width: 90%;
        padding: 0 5%;
        display: block;
        height: 160px;
        overflow: hidden;
      }
      img {
        border-radius: 6px;
        width: 100%;
        height: 100%;
      }
      span{
        text-align: center;
        line-height: 30px;
      }
    }
  }
}
</style>
